<html>

<head>
    <link rel="stylesheet" href="../normalize.css">
    <link rel="stylesheet" href="../index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
    </div>

    <div id="app2">
        <p>{{ foo }}</p>
        <!-- 这里的 `foo` 不会更新！ -->
        <button v-on:click="foo = 'baz'">Change it</button>
    </div>

    <script type="text/javascript">
        // 我们的数据对象
        var data = { a: 1 }

        // 该对象被加入到一个 Vue 实例中
        var vm = new Vue({
            data: data
        })

        // 获得这个实例上的属性
        // 返回源数据中对应的字段
        console.info(vm.a == data.a) // => true

        // 设置属性也会影响到原始数据
        vm.a = 2
        console.info(data.a) // => 2

        // ……反之亦然
        data.a = 3
        console.info(vm.a) // => 3

        //值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。
        //b 的改动将不会触发任何视图的更新。所以如果知道有这个值，可以提前赋予初始值。
        vm.b = 'hi'

        //------------------------------------------------
        var obj = {
            foo: 'bar'
        }
        //如果使用这个方法，则任何属性的更改都不会影响响应系统的渲染
        Object.freeze(obj)

        new Vue({
            el: '#app2',
            data: obj
        })
        //------------------------------------------------
        //除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：
        var data = { a: 1 }
        var vm = new Vue({
            el: '#example',
            data: data
        })

        vm.$data === data // => true
        vm.$el === document.getElementById('example') // => true

        // $watch 是一个实例方法
        vm.$watch('a', function (newValue, oldValue) {
            // 这个回调将在 `vm.a` 改变后调用
            console.info("我变化了")
        })

    </script>
</body>

</html>